import React, { useState } from 'react';
import { Card, Row, Col, Typography } from 'antd';
import Navbar from '../components/navbar';
import MenuAvatar from '@/components/menuAvatar';
import PurchaseStock from '@/components/PurchaseStock';
import RadarChart from '@/components/radar';

const { Title } = Typography;

const SimulationPage = () => {
  const [menuHeight, setMenuHeight] = useState(0);

  const stockData = {
    "贵州茅台 SH600519": { "上涨趋势": 8.51,  "公司基本面状况": 9.46, "盈利能力": 11.41, "行业环境": 7.11, "风险": 6.13 },
    "比亚迪 SZ002594": { "上涨趋势": 15.81, "公司基本面状况": 8.51, "盈利能力": 10.35, "行业环境": 6.31, "风险": 9.13 },
    "中远海控 SH601919": { "上涨趋势": 14.29, "公司基本面状况": 5.28, "盈利能力": 9.61, "行业环境": 6.91, "风险": 7.98 },
    "招商银行 SH600036": { "上涨趋势": 15.09, "公司基本面状况": 8.76, "盈利能力": 10.5,  "行业环境": 5.46, "风险": 9.08 },
    "海通证券 SH600837": { "上涨趋势": 12.86, "公司基本面状况": 4.79, "盈利能力": 9.16,  "行业环境": 9.05, "风险": 6.44 },
    "中国西电 SH601179": { "上涨趋势": 9.83,  "公司基本面状况": 8.53, "盈利能力": 10.77, "行业环境": 5.63, "风险": 8.08 }
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw', margin: 0, padding: 0, overflowX: 'hidden' }}>
      <div style={{ backgroundColor: '#ececec' }}>
        <MenuAvatar onHeight={setMenuHeight} />
      </div>
      <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
        <div style={{ width: '256px', backgroundColor: '#ececec', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
          <Navbar />
        </div>
        <div style={{ flexGrow: 1, backgroundColor: '#f0f2f5', padding: '20px' }}>
          <div style={{ width: '20%' }}>
            <PurchaseStock />
          </div>
          <div style={{ marginTop: '20px' }}>
            <Title level={2} style={{ color: '#1890ff', marginBottom: 20 }}>股票推荐</Title>
            <Row gutter={[16, 16]} justify="space-evenly">
              {Object.entries(stockData).map(([stockId, data]) => (
                <Col key={stockId} span={8}>
                  <Card title={stockId} bordered={false} hoverable>
                    <RadarChart stockData={data} stockId={stockId} options={{ legend: { show: false } }} />
                  </Card>
                </Col>
              ))}
            </Row>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SimulationPage;











//有改进 不错
// import React, { useState } from 'react';
// import { Card, Row, Col } from 'antd';
// import Navbar from '../components/navbar';
// import MenuAvatar from '@/components/menuAvatar';
// import PurchaseStock from '@/components/PurchaseStock';
// import RadarChart from '@/components/radar';

// const SimulationPage = () => {
//   const [menuHeight, setMenuHeight] = useState(0);

//   const stockData = {
//     "贵州茅台": { "上涨趋势": 8.51,  "公司基本面状况": 9.46, "盈利能力": 11.41, "行业环境": 7.11, "风险": 6.13 },
//     "比亚迪": { "上涨趋势": 15.81, "公司基本面状况": 8.51, "盈利能力": 10.35, "行业环境": 6.31, "风险": 9.13 },
//     "中远海控": { "上涨趋势": 14.29, "公司基本面状况": 5.28, "盈利能力": 9.61, "行业环境": 6.91, "风险": 7.98 },
//     "招商银行": { "上涨趋势": 15.09, "公司基本面状况": 8.76, "盈利能力": 10.5,  "行业环境": 5.46, "风险": 9.08 },
//     "海通证券": { "上涨趋势": 12.86, "公司基本面状况": 4.79, "盈利能力": 9.16,  "行业环境": 9.05, "风险": 6.44 },
//     "中国西电": { "上涨趋势": 9.83,  "公司基本面状况": 8.53, "盈利能力": 10.77, "行业环境": 5.63, "风险": 8.08 }
//   };

//   return (
//     <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw', margin: 0, padding: 0, overflowX: 'hidden' }}>
//       <div style={{ backgroundColor: '#ececec' }}>
//         <MenuAvatar onHeight={setMenuHeight} />
//       </div>
//       <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
//         <div style={{ width: '256px', backgroundColor: '#ececec', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
//           <Navbar />
//         </div>
//         <div style={{ flexGrow: 1, backgroundColor: '#f0f2f5', padding: '20px' }}>
//           <div style={{ width: '20%' }}>
//             <PurchaseStock />
//           </div>
//           <div style={{ marginTop: '20px' }}>
//             <h2>股票推荐</h2>
//             <Row gutter={[16, 16]} justify="space-evenly">
//               {Object.entries(stockData).map(([stockId, data]) => (
//                 <Col key={stockId} span={8}>
//                   <Card title={stockId} bordered={false} hoverable>
//                     <RadarChart stockData={data} stockId={stockId} />
//                   </Card>
//                 </Col>
//               ))}
//             </Row>
//           </div>
//         </div>
//       </div>
//     </div>
//   );
// };

// export default SimulationPage;










// import React, { useState } from 'react';
// import Navbar from '../components/navbar';
// import MenuAvatar from '@/components/menuAvatar';
// import PurchaseStock from '@/components/PurchaseStock';
// import RadarChart from '@/components/radar';

// const SimulationPage = () => {
//   const [menuHeight, setMenuHeight] = useState(0);

//   const stockData = {
//     "贵州茅台": { "上涨趋势": 8.51,  "公司基本面状况": 9.46, "盈利能力": 11.41, "行业环境": 7.11, "风险": 6.13 },
//     "比亚迪": { "上涨趋势": 15.81, "公司基本面状况": 8.51, "盈利能力": 10.35, "行业环境": 6.31, "风险": 9.13 },
//     "中远海控": { "上涨趋势": 14.29, "公司基本面状况": 5.28, "盈利能力": 9.61, "行业环境": 6.91, "风险": 7.98 },
//     "招商银行": { "上涨趋势": 15.09, "公司基本面状况": 8.76, "盈利能力": 10.5,  "行业环境": 5.46, "风险": 9.08 },
//     "海通证券": { "上涨趋势": 12.86, "公司基本面状况": 4.79, "盈利能力": 9.16,  "行业环境": 9.05, "风险": 6.44 },
//     "中国西电": { "上涨趋势": 9.83,  "公司基本面状况": 8.53, "盈利能力": 10.77, "行业环境": 5.63, "风险": 8.08 }
//   };

//   return (
//     <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw', margin: 0, padding: 0, overflowX: 'hidden' }}>
//       <div style={{ backgroundColor: '#ececec' }}>
//         <MenuAvatar onHeight={setMenuHeight} />
//       </div>
//       <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
//         <div style={{ width: '256px', backgroundColor: '#ececec', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
//           <Navbar />
//         </div>
//         <div style={{ flexGrow: 1, backgroundColor: '#f0f2f5', padding: '20px' }}>
//           <div style={{ width: '20%' }}>
//             <PurchaseStock />
//           </div>
//           股票推荐
//           <div style={{ width: '80%', display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly' }}>
//             {Object.entries(stockData).map(([stockId, data]) => (
//               <div key={stockId} style={{ width: '33%', padding: '10px', boxSizing: 'border-box' }}>
//                 <RadarChart stockData={data} stockId={stockId} />
//               </div>
//             ))}
//           </div>
//         </div>
//       </div>
//     </div>
//   );
// };

// export default SimulationPage;




// import React, { useState } from 'react';
// import Navbar from '../components/navbar';
// import MenuAvatar from '@/components/menuAvatar';
// import PurchaseStock from '@/components/PurchaseStock';
// import RadarChart from '@/components/radar';

// const SimulationPage = () => {
//   const [menuHeight, setMenuHeight] = useState(0);

//   const stockData = {
//     "002675": { "上涨趋势": 15.81, "公司基本面状况": 6.51, "盈利能力": 10.35, "行业环境": 6.31, "风险": 9.13 },
//     "300964": { "上涨趋势": 14.29, "公司基本面状况": 5.28, "盈利能力": 9.61, "行业环境": 6.91, "风险": 7.98 },
//     "603477": { "上涨趋势": 15.09, "公司基本面状况": 8.76, "盈利能力": 10.5,  "行业环境": 5.46, "风险": 9.08 },
//     "600837": { "上涨趋势": 12.86, "公司基本面状况": 4.79, "盈利能力": 9.16,  "行业环境": 9.05, "风险": 6.44 },
//     "688516": { "上涨趋势": 9.83,  "公司基本面状况": 8.53, "盈利能力": 10.77, "行业环境": 5.63, "风险": 8.08 }
//   };

//   return (
//     <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw', margin: 0, padding: 0, overflowX: 'hidden' }}>
//       <div style={{ backgroundColor: '#ececec' }}>
//         <MenuAvatar onHeight={setMenuHeight} />
//       </div>
//       <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
//         <div style={{ width: '256px', backgroundColor: '#ececec', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
//           <Navbar />
//         </div>
//         <div style={{ flexGrow: 1, backgroundColor: '#f0f2f5', padding: '20px' }}>
//           <div style={{ width: '30%' }}>
//             <PurchaseStock />
//           </div>
//           <div style={{ width: '70%', display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly' }}>
//             {Object.entries(stockData).map(([stockId, data]) => (
//               <div key={stockId} style={{ width: 'calc(33.3% - 20px)', margin: '10px', boxSizing: 'border-box' }}>
//                 <RadarChart stockData={data} stockId={stockId} />
//               </div>
//             ))}
//           </div>
//         </div>
//       </div>
//     </div>
//   );
// };

// export default SimulationPage;







// import React, { useState } from 'react';
// import Navbar from '../components/navbar';
// import MenuAvatar from '@/components/menuAvatar';
// import PurchaseStock from '@/components/PurchaseStock';
// import RadarChart from '@/components/radar';

// const SimulationPage = () => {
//   const [menuHeight, setMenuHeight] = useState(0);

//   const stockData = {
//     "002675": { "上涨趋势": 15.81, "公司基本面状况": 6.51, "盈利能力": 10.35, "行业环境": 6.31, "风险": 9.13 },
//     "300964": { "上涨趋势": 14.29, "公司基本面状况": 5.28, "盈利能力": 9.61, "行业环境": 6.91, "风险": 7.98 },
//     "603477": { "上涨趋势": 15.09, "公司基本面状况": 8.76, "盈利能力": 10.5,  "行业环境": 5.46, "风险": 9.08 },
//     "600837": { "上涨趋势": 12.86, "公司基本面状况": 4.79, "盈利能力": 9.16,  "行业环境": 9.05, "风险": 6.44 },
//     "688516": { "上涨趋势": 9.83,  "公司基本面状况": 8.53, "盈利能力": 10.77, "行业环境": 5.63, "风险": 8.08 }
//   };

//   return (
//     <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw', margin: 0, padding: 0, overflowX: 'hidden' }}>
//       <div style={{ backgroundColor: '#ececec' }}>
//         <MenuAvatar onHeight={setMenuHeight} />
//       </div>
//       <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
//         <div style={{ width: '256px', backgroundColor: '#ececec', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
//           <Navbar />
//         </div>
//         <div style={{ flexGrow: 1, backgroundColor: '#f0f2f5', padding: '20px' }}>
//           <div style={{ width: '40%' }}>
//             <PurchaseStock />
//           </div>
//           <div style={{ width: '60%', display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}>
//             {Object.entries(stockData).map(([stockId, data], index) => (
//               // 使用 CSS Grid 来更精细地控制布局
//               <div key={stockId} style={{
//                 width: (index === 0 || index === 1 || index === 2) ? '33.33%' : '50%',
//                 padding: '10px',
//                 boxSizing: 'border-box'
//               }}>
//                 <RadarChart stockData={data} stockId={stockId} />
//               </div>
//             ))}
//           </div>
//         </div>
//       </div>
//     </div>
//   );
// };

// export default SimulationPage;
